<template>
    <div>
        <div class="recomment-title">
            <img class="title-img" src="https://imgs.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
            <span>猜你喜欢</span>
        </div>
        <ul class="items" >
            <!-- 添加跳转到详情页的路由 -->
            <router-link
                tag="li"
                class="item"
                v-for="(item,index) in favorList"
                :key="index"
                :to="'/detail/' + item.id"
                >
                <div class="item-img-wrapper">
                    <img class="item-img" :src="item.imgUrl" alt="">
                </div>
                <div class="item-info">
                    <div class="item-info-title-t">{{item.title}}</div>
                    <div class="item-info-price">
                        <span class="item-info-price-sym">￥</span>
                        <em class="item-info-price-pnum">{{item.pnum}}</em>
                        <span class="item-info-price-sym">起</span>
                    </div>
                    <div class="item-info-bottom" >
                        <span class="item-info-bottom-comment">{{item.comment}}</span>
                        <span class="item-info-bottom-address">{{item.address}}</span>
                    </div>
                    <div class="item-info-feature" v-if= item.feature>
                        <div>{{ item.feature }}</div>
                    </div>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>

export default {
    name: 'HomeRecommend',
    props: {
        favorList: Array
    },
    data () {
        return {
            hasFeature: false
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
    .recomment-title
        width: 2rem
        height: .8rem
        line-height: .8rem
        background: $bgColor
        text-indent: .2rem
        margin-bottom: .1rem
        border-radius: 0 0 20% 0
        color: white
        box-shadow: gray 0px 0px 5px 0;
        .title-img
            display: inline-block
            width: .3rem
            height: .3rem
            line-height: .3rem
            overflow: hidden
            vertical-align: center
    .items
        display: flex
        flex: 1
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        .item
            margin: .1rem .3rem
            .item-img-wrapper
                width: 3.2rem
                height: 3.2rem
                margin-bottom:.2rem
                box-shadow: gray 0px 0px 4px 0;
                .item-img
                    width: 100%
                    height: 100%
    .item-info
        width: 3rem
        .item-info-title-t
            font-size: .38rem
            margin: .1rem .1rem .25rem 0
        .item-info-title-f
            font-size: .38rem
        .item-info-price
            color: orange
            margin-bottom: .3rem
            float: right
            .item-info-price-sym
                font-size: .1rem
            .item-info-price-pnum
                font-size: .36rem
        .item-info-feature
            overflow: hidden
            background-color: #fff9f9
            padding: 0.04rem 0.1rem
            font-size: .1rem
            color: #f55;
            width: 70%
            margin: .15rem 0
            line-height: .34rem
            border-radius: 0.1rem
        .item-info-bottom-comment
            font-size: .1rem
            color: gray
        .item-info-bottom-address
            float: left
            font-size: .1rem
            color: gray
</style>
